<template>
  <view class="tree-menu">
    <view v-for="(item, index) in treeData" :key="item.id || index" class="tree-node">
      <view class="node-row" @click="toggle(item)">
        <text v-if="item.children && item.children.length > 0" :class="['arrow', { expanded: item.expanded }]">
          ›
        </text>
        <text v-else class="arrow-placeholder"></text>

        <text :class="['label', selectedId === item.id ? 'selected' : '']" @click.stop="selectNode(item)"
          :title="item.label">
          {{ item.label }}
        </text>
      </view>

      <transition name="fade">
        <view v-show="item.expanded && item.children && item.children.length > 0" class="children">
          <tree-select :treeData="item.children" :selectedId="selectedId" @nodeSelected="onChildSelected" />
        </view>
      </transition>
    </view>
  </view>
</template>

<script>
export default {
  name: 'tree-select',
  props: {
    treeData: {
      type: Array,
      required: true,
    },
    selectedId: {
      type: [Number, String],
      default: null,
    },
  },
  data () {
    return {
      departmentshow: false, // 选择部门弹窗
    }
  },
  methods: {
    // 弹窗
    departmentclose () {
      this.departmentshow = false
    },
    // 部门选择处理 
    handleDeptPicker () {
      this.departmentshow = true
    },
    toggle (item) {
      this.$set(item, 'expanded', !item.expanded);
    },
    selectNode (item) {
      this.$emit('nodeSelected', {
        id: item.id,
        label: item.label,
        depart_no: item.depart_no,
        worker_name: item.worker_name,
        depart_manageId: item.depart_manageId,
        pid: item.pid,
      });
    },
    onChildSelected (item) {
      this.$emit('nodeSelected', item);
    },
  },
};
</script>

<style scoped>
.tree-menu {
  max-height: 70vh;
  overflow-y: auto;
  font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #fff;
  border-radius: 8px;
  padding: 12rpx 16rpx;
  box-sizing: border-box;
}

/* 每一层树节点容器 */
.tree-node {
  margin-left: 0;
  font-size: 30rpx;
  line-height: 42rpx;
  user-select: none;
}

/* 树层级递归时 children 容器缩进，带左侧细线 */
.children {
  margin-left: 40rpx;
  padding-left: 18rpx;
  margin-top: 6rpx;
}

/* 一行内容区域 */
.node-row {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 8rpx 0;
  border-radius: 6rpx;
  transition: background-color 0.2s ease;
}

.node-row:hover {
  background-color: #f5f7fa;
}

/* 箭头图标样式，默认右箭头 */
.arrow {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 46rpx;  /* 增大宽度 */
  height: 46rpx; /* 增大高度 */
  margin-right: 12rpx;
  color: #909399;
  /* font-weight: 700; */
  transform-origin: center;
  transition: transform 0.3s ease, color 0.3s ease;
  user-select: none;
  font-size: 46rpx; /* 增大字体大小 */
}

/* 展开时箭头旋转90度向下，颜色加深 */
.arrow.expanded {
  transform: rotate(90deg);
  color: #409eff;
  font-weight: 800;
}

/* 没有子节点时占位，保持对齐 */
.arrow-placeholder {
  display: inline-block;
  width: 36rpx;  /* 增大占位宽度 */
  margin-right: 12rpx;
}

/* 标签文字样式 */
.label {
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #303133;
  font-weight: 400;
  transition: color 0.3s ease, background-color 0.3s ease;
  user-select: text;
}

/* 选中样式 */
.selected {
  color: #409eff;
  font-weight: 600;
  background-color: transparent;
  padding: 0;
  border-radius: 0;
}

/* 动画过渡 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.25s ease;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>